<template>
  <section class="todoapp">
    <header class="header">
      <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo" />
    </header>
    <section v-show="todos.length" class="main">
      <input
        id="toggle-all"
        :checked="allChecked"
        class="toggle-all"
        type="checkbox"
        @change="toggleAll({ done: !allChecked })"
      />
      <label for="toggle-all" />
      <ul class="todo-list">
        <todo
          v-for="(todo, index) in filteredTodos"
          :key="index"
          :todo="todo"
          @toggleTodo="toggleTodo"
          @editTodo="editTodo"
          @deleteTodo="deleteTodo"
        />
      </ul>
    </section>
    <footer v-show="todos.length" class="footer">
      <span class="todo-count">
        <strong>{{ remaining }}</strong>
        {{ remaining | pluralize('item') }} left
      </span>
      <ul class="filters">
        <li v-for="(val, key) in filters" :key="key">
          <a
            :class="{ selected: visibility === key }"
            @click.prevent="visibility = key"
          >{{ key | capitalize }}</a>
        </li>
      </ul>
    </footer>
  </section>
</template>

<script>
import Todo from './Todo'

const STORAGE_KEY = 'todos'

const filters = {
  all: todos => todos,
  active: todos => todos.filter(todo => !todo.done),
  completed: todos => todos.filter(todo => todo.done)
}

const defalutList = [
  { text: 'star this repository', done: false },
  { text: 'fork this repository', done: false },
  { text: 'follow author', done: false },
  { text: 'vue-element-admin', done: true },
  { text: 'vue', done: true },
  { text: 'element-ui', done: true },
  { text: 'axios', done: true },
  { text: 'webpack', done: true }
]

export default {
  components: {
    Todo
  },
  filters: {
    pluralize: (n, w) => (n === 1 ? w : w + 's'),
    capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
  },
  data() {
    return {
      visibility: 'all',
      filters,
      todos: defalutList
    }
  },
  computed: {
    allChecked() {
      return this.todos.every(todo => todo.done)
    },
    filteredTodos() {
      return filters[this.visibility](this.todos)
    },
    remaining() {
      return this.todos.filter(todo => !todo.done).length
    }
  },
  methods: {
    setLocalStorage() {
      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
    },
    addTodo(e) {
      const text = e.target.value
      if (text.trim()) {
        this.todos.push({
          text,
          done: false
        })
        this.setLocalStorage()
      }
      e.target.value = ''
    },
    toggleTodo(val) {
      val.done = !val.done
      this.setLocalStorage()
    },
    deleteTodo(todo) {
      this.todos.splice(this.todos.indexOf(todo), 1)
      this.setLocalStorage()
    },
    editTodo({ todo, value }) {
      todo.text = value
      this.setLocalStorage()
    },
    clearCompleted() {
      this.todos = this.todos.filter(todo => !todo.done)
      this.setLocalStorage()
    },
    toggleAll({ done }) {
      this.todos.forEach(todo => {
        todo.done = done
        this.setLocalStorage()
      })
    }
  }
}
</script>

<style lang="stylus">
.todoapp
  font 14px 'Helvetica Neue', Helvetica, Arial, sans-serif
  line-height 1.4em
  color #4d4d4d
  min-width 230px
  max-width 550px
  margin 0 auto
  font-weight 300
  background #fff
  z-index 1
  position relative
  button
    margin 0
    padding 0
    border 0
    background none
    font-size 100%
    vertical-align baseline
    font-family inherit
    font-weight inherit
    color inherit
    appearance none
  input
    &:input-placeholder
      font-style italic
      font-weight 300
      color #e6e6e6
  h1
    position absolute
    top -155px
    width 100%
    font-size 100px
    font-weight 100
    text-align center
    color rgba(175, 47, 47, 0.15)
    text-rendering optimizeLegibility
:focus
  outline 0
.hidden
  display none
.new-todo, .edit
  position relative
  margin 0
  width 100%
  font-size 18px
  font-family inherit
  font-weight inherit
  line-height 1.4em
  border 0
  color inherit
  padding 6px
  border 1px solid #999
  box-shadow inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2)
  box-sizing border-box
.new-todo
  padding 10px 16px 16px 60px
  border none
  background rgba(0, 0, 0, 0.003)
  box-shadow inset 0 -2px 1px rgba(0, 0, 0, 0.03)
.main
  position relative
  z-index 2
  border-top 1px solid #e6e6e6
.toggle-all
  text-align center
  border none
  opacity 0
  position absolute
  & + label
    width 60px
    height 34px
    font-size 0
    position absolute
    top -52px
    left -13px
    transform rotate(90deg)
    &:before
      content '❯'
      font-size 22px
      color #e6e6e6
      padding 10px 27px 10px 27px
  &:checked
    & + label
      &:before
        color #737373
.todo-list
  margin 0
  padding 0
  list-style none
  li
    position relative
    font-size 24px
    border-bottom 1px solid #ededed
    &:hover
      .destroy
        display block
    &:last-child
      border-bottom none
    &.editing
      border-bottom none
      padding 0
      .edit
        display block
        width 506px
        padding 12px 16px
        margin 0 0 0 43px
      .view
        display none
      &:last-child
        margin-bottom -1px
    .toggle
      text-align center
      width 40px
      height auto
      position absolute
      top 0
      bottom 0
      margin auto 0
      border none
      appearance none
      opacity 0
      height 40px
      & + label
        background-image url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E')
        background-repeat no-repeat
        background-position center left
        background-size 36px
      &:checked
        & + label
          background-size 36px
          background-image url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E')
    label
      word-break break-all
      padding 15px 15px 15px 50px
      display block
      line-height 1
      font-size 14px
      transition color 0.4s
      font-weight 700
    .completed
      label
        color #d9d9d9
        text-decoration line-through
    .destroy
      display none
      position absolute
      top 0
      right 10px
      bottom 0
      width 40px
      height 40px
      margin auto 0
      font-size 30px
      color #cc9a9a
      transition color 0.2s ease-out
      cursor pointer
      &:hover
        color #af5b5e
      &:after
        content '×'
    .edit
      display none
.footer
  color #777
  position relative
  padding 10px 15px
  text-align center
  border-top 1px solid #e6e6e6
  &:before
    content ''
    position absolute
    right 0
    bottom 0
    left 0
    height 40px
    overflow hidden
    box-shadow 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px #f6f6f6, 0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px #f6f6f6, 0 17px 2px -6px rgba(0, 0, 0, 0.2)
.todo-count
  float left
  text-align left
  strong
    font-weight 300
.filters
  margin 0
  padding 0
  position relative
  z-index 1
  list-style none
  li
    display inline
    a
      color inherit
      font-size 12px
      padding 3px 7px
      text-decoration none
      border 1px solid transparent
      border-radius 3px
      &:hover
        border-color rgba(175, 47, 47, 0.1)
      &.selected
        border-color rgba(175, 47, 47, 0.2)
.clear-completed, html
  .clear-completed
    &:active
      float right
      position relative
      line-height 20px
      text-decoration none
      cursor pointer
.clear-completed
  &:hover
    text-decoration underline
.info
  margin 65px auto 0
  color #bfbfbf
  font-size 10px
  text-shadow 0 1px 0 rgba(255, 255, 255, 0.5)
  text-align center
  p
    line-height 1
  a
    color inherit
    text-decoration none
    font-weight 400
    &:hover
      text-decoration underline
  @media screen and (-webkit-min-device-pixel-ratio: 0)
    .toggle-all, .todo-list
      li
        .toggle
          background none
    .todo-list
      li
        .toggle
          height 40px
  @media (max-width: 430px)
    .footer
      height 50px
    .filters
      bottom 10px
</style>
